<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="showCreateModal">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :columns="columns"
      row-key="id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
      class="break-all"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'oper'">
          <a-space>
            <a-button type="primary" @click="showUpdateModal(record)">编辑</a-button>
          </a-space>
        </template>
        <div v-else-if="column.key === 'id'" class="w-24">{{ record.id }}</div>
      </template>
    </a-table>
    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="modalOk">
      <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="用户等级" v-bind="validateInfos.userLevel">
          <a-input v-model:value="modelRef.userLevel" />
        </a-form-item>
        <a-form-item label="等级名称" v-bind="validateInfos.levelName">
          <a-input v-model:value="modelRef.levelName" />
        </a-form-item>
        <a-form-item label="每天查看免费文章个数" v-bind="validateInfos.numberOfFreeArticles">
          <a-input-number v-model:value="modelRef.numberOfFreeArticles" :min="1" />
        </a-form-item>
        <a-form-item label="每天查看其它会员信息个数" v-bind="validateInfos.numberOfFreeMember">
          <a-input-number v-model:value="modelRef.numberOfFreeMember" :min="1" />
        </a-form-item>
        <a-form-item label="每天查看其它会员动态个数" v-bind="validateInfos.numberOfFreeDynamic">
          <a-input-number v-model:value="modelRef.numberOfFreeDynamic" :min="1" />
        </a-form-item>
        <a-form-item label="费用" v-bind="validateInfos.fee">
          <a-input-number
            :disabled="modelRef.userLevel === '0级会员'"
            v-model:value="modelRef.fee"
            :min="modelRef.userLevel === '0级会员' ? 0 : 0.01"
            :step="0.01"
          />
        </a-form-item>
        <a-form-item class="!mb-0">
          <span class="text-red-600">*改动实时生效，请谨慎*</span>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
// import { UserOutlined } from "@ant-design/icons-vue";
import { MemberLevel, Api } from "/@/api/manage/setting";
import { useCURD } from "/@/hooks/web/useCURD";
const columns = [
  {
    title: "用户等级id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "等级名称",
    dataIndex: "levelName",
    key: "levelName",
  },
  {
    title: "每天查看免费文章个数",
    dataIndex: "numberOfFreeArticles",
    key: "numberOfFreeArticles",
  },
  {
    title: "每天查看其它会员信息个数",
    dataIndex: "numberOfFreeMember",
  },
  {
    title: "每天查看其它会员动态个数",
    dataIndex: "numberOfFreeDynamic",
  },
  {
    title: "费用",
    dataIndex: "fee",
  },
  {
    title: "操作",
    key: "oper",
  },
];
const modelRef = reactive<MemberLevel>({
  fee: 0.01,
  levelName: "",
  numberOfFreeArticles: 1,
  numberOfFreeDynamic: 1,
  numberOfFreeMember: 1,
  userLevel: "",
});
watch(
  () => modelRef.userLevel,
  () => {
    if (modelRef.userLevel === "0级会员") {
      modelRef.fee = 0;
    }
  }
);
const {
  modalVisible,
  modalTitle,
  validateInfos,
  showCreateModal,
  showUpdateModal,
  modalOk,
  deleteRecord,
  pagination,
  tableLoading,
  tableData,
  reloadTable,
} = useCURD<MemberLevel, any>({
  isPagination: true,
  createTitle: "新增会员等级",
  updateTitle: "编辑会员等级",
  deleteMessage: "确认删除该会员等级吗？",
  modelRef,
  cudUrl: Api.memberLevels,
  getPageUrl: Api.memberLevels,
  onBeforeOk(data, isCreate) {},
});
onMounted(async () => {
  await reloadTable();
});
</script>
